<template>
    <div :id="chartId" style="height: 150%;width: 100%"></div>
</template>

<script setup>
    import * as echarts from "echarts";
    import 'echarts-wordcloud';
    import {onMounted, onUnmounted, defineProps, onBeforeMount, ref, reactive} from 'vue'
    import {getWordCloud} from "@/api/textualmaterial";
    import {ElMessage} from "element-plus";

    let myEcharts = echarts;
    // const {chartWidth, chartHeight, chartId} = defineProps(['chartWidth', 'chartHeight', 'chartId'])
    const {course} = defineProps(['course']);
    const chartId = ref("test");

    let dataList = [];

    const wordClods =()=>{
        getWordCloud({url:course.url}).then((res)=>{
            // console.log(res.data)
            let Data = res.data;
            changeData(Data);
            // dataList = Data
            // console.log(dataList)
        }).catch((error)=>{
            console.log(error);
        }).finally(()=>{
            initEchart(chartId.value)
        })
    }
    const changeData = (data)=>{
        if (data.length == 0){
            ElMessage.warning("当前pdf/docx内容全部为图片，未获取到文本内容")
        }else {
            for (let i = 0; i < data.length; i++) {
                dataList.push({name:data[i],value:data.length-i});
            }
        }

    }
    onMounted(() => {
        // initData(chartId)
        wordClods();
    })

    // const initData = (id) => {
    //     axios.get(`./dataset/keywords/keywords_top150_${id}.csv`)
    //         .then((response) => {
    //             // 解析 CSV 数据，跳过第一行（列标题）
    //             const lines = response.data.split('\n');
    //
    //             for (let i = 1; i < lines.length; i++) {
    //                 const columns = lines[i].split(',');
    //                 dataList.push({name: columns[0], value: parseInt(columns[1])})
    //             }
    //
    //
    //         })
    //         .catch((error) => {
    //             console.error(error);
    //         })
    //         .finally(() => {
    //             // 输出数组
    //             initEchart(id);
    //         });
    // }

    function initEchart(id) {
        const echartDom = document.getElementById(`${id}`)
        const myChart = myEcharts.init(echartDom)
        const option = {
            series: [{
                type: 'wordCloud',
                shape: 'circle',
                keepAspect: false,
                shrinkToFit: true,
                // maskImage: maskImage,
                left: 'center',
                top: 'center',
                width: '100%',
                height: '100%',
                // right: null,
                // bottom: null,
                sizeRange: [8, 60],
                rotationRange: [-90, 90],
                rotationStep: 45,
                gridSize: 3,
                drawOutOfBound: false,
                layoutAnimation: true,
                textStyle: {
                    fontFamily: 'sans-serif',
                    fontWeight: 'bold',
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    focus: 'self',
                    textStyle: {
                        textShadowBlur: 3,
                        textShadowColor: '#333'
                    }
                },
                //data属性中的value值却大，权重就却大，展示字体就却大
                data: dataList
            }]

        }
        option && myChart.setOption(option)

        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
            myChart.resize();
        });
    }
</script>

<style scoped>

</style>